<template>
  <div class="animated fadeIn">
    <div class="row">
      <div class="col-md-12">
        <b-card>
          <div slot="header">
            <strong>Options</strong>
          </div>
          <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
          <b-button variant="outline-primary">Primary</b-button>
          <!-- Secondary, outline button -->
          <b-button variant="outline-secondary">Secondary</b-button>
          <!-- Indicates a successful or positive action -->
          <b-button variant="outline-success">Success</b-button>
          <!-- Indicates caution should be taken with this action -->
          <b-button variant="outline-warning">Warning</b-button>
          <!-- Indicates a dangerous or potentially negative action -->
          <b-button variant="outline-danger">Danger</b-button>
        </b-card>
      </div><!--/.col-->
    </div><!--/.row-->
  </div>
</template>

<script>
export default {
  name: 'buttons'
}
</script>
